<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app"></div>

    <script>
      console.log('begin...');

      //链式编程
      // 网络请求的结果： aaa
      // 第一次自己处理 为aaa11
      // 第二步处理： aaa11-> aaa1122
      //第三部处理：aaa1122->aaa112233

      new Promise((resolve, reject) => {
        //1.网络请求的结果
        setTimeout(() => {
          resolve('aaa');
        }, 1000);
      }).then(res => {
        // 第一次拿到结果
        console.log(res, '第一次拿到结果');
        // 对第一次拿到的结果进行第一次处理
        return new Promise((resolve, reject) => {
          // 第一次处理的代码
          resolve(res + '11');
        }).then(res => {
          // 第二次处理的代码
          console.log(res, '第一次处理后的结果');
          return new Promise((resolve, reject) => {
            // 第二次处理的代码
            resolve(res + '22');
          }).then(res => {
            // 第三次处理的代码
            console.log(res, '第二次处理后的结果');
            return new Promise((resolve, reject) => {
              resolve(res + '333');
            }).then(res => {
              console.log(res, '第三次处理的后的结果');
            });
          });
        });
      });
    </script>
  </body>
</html>
